import React, { useEffect, useState } from 'react'
import { Table, Form, Input, Radio, Upload, Button, message, Modal } from 'antd';
import { createSlice, createAsyncThunk } from '@reduxjs/toolkit'

import { useSelector, useDispatch } from 'react-redux';
import { isModalVisible, setIsModalVisible } from '../../store/slices/typeSlice';
import { updateType } from '../../services/type';


export default function Update({ show }) {

    const [form] = Form.useForm();
    // studentSlice中的值
    let { isModalVisible, types } = useSelector(state => {
        // console.log("页面：", state.type);
        return state.type
    });

    let dispatch = useDispatch();
    // 设置当前表单的值
    useEffect(() => {
        // 因为upload不是表单的值，不能通过setFieldsValue得到
        console.log("typesdsgfdsg:", types);
        form.setFieldsValue({ ...types, isShow: JSON.stringify(types.isShow) });
        // 先把默认的图片的得到，且是从后端来的
        // 因为是通过set，改变了state,所以要在useEffect中写，设置第二个参数
    }, [types._id])

    const showModal = () => {
        dispatch(setIsModalVisible(true));
    };
    // 确定修改事
    const handleOk = async () => {
        // 获得表单中所有输入的值
        let values = form.getFieldsValue();
        console.log(values);
        // 把当前的id也要传过去
        values = { ...values, _id: types._id };
        // console.log(values);
        await updateType(values);
        show();
        // 清除表单内容
        form.resetFields();
        dispatch(setIsModalVisible(false));
    };

    const handleCancel = () => {
        dispatch(setIsModalVisible(false));
    };




    return (
        <div>
            <Modal forceRender title="修改类型" visible={isModalVisible} onClick={showModal}
                onOk={handleOk} onCancel={handleCancel}
                okText="确认"
                cancelText="取消">
                <Form style={{ textAlign: "left", }} form={form}
                    name="add"
                    labelCol={{
                        span: 8,
                    }}
                    wrapperCol={{
                        span: 10,
                    }}

                >
                    <Form.Item extra="please input typeName."
                        name="typeName"
                        label="类型"
                        rules={[
                            {
                                required: true,
                                message: '类型不能为空!',
                            },
                        ]}
                    >
                        <Input />
                    </Form.Item>
                    <Form.Item
                        name="isShow"
                        label="状态"
                    >
                        <Radio.Group >
                            <Radio value="true">true</Radio>
                            <Radio value="false">false</Radio>
                        </Radio.Group>
                    </Form.Item>

                </Form>
            </Modal>
        </div>
    )
}
